<!--  -->
<template>
  <div>
    <el-button type="primary" plain @click="dialogTableVisible = true">添加用户</el-button>
    <!-- 多条件查询 -->
     <el-form :model="s" label-width="40px" style="margin-top:55px; display:flex;">

      <el-form-item style="width:400px;">
        <el-input v-model="s.uname" placeholder="请输入用户姓名"></el-input>
      </el-form-item>
      <el-form-item label="类型" :label-width="formLabelWidth">
        <el-select v-model="s.utype" placeholder="请选择状态">
        <el-option label="全部" value="2"></el-option>
          <el-option label="会员" value="1"></el-option>
          <el-option label="普通用户" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="test(s)">查询</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="dialogTableVisible" title="添加用户">
      <el-form :model="user">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="user.uname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="user.upwd" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="user.utele" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="user.utype" placeholder="请选择状态">
            <el-option label="会员" value="1"></el-option>
            <el-option label="普通用户" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="user.utype==1" label="会员结束时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="user.endday"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd hh:mm:ss">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="余额" :label-width="formLabelWidth">
          <el-input v-model="user.umoney" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="addUser()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog :visible.sync="dialogFormVisible4Edit" title="修改用户">
      <el-form :model="usered">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="usered.uname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="usered.upwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="usered.utele" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型"  :label-width="formLabelWidth">
          <el-select v-model="usered.utype" placeholder="请选择状态">
            <el-option label="会员" value="1"></el-option>
            <el-option label="普通用户" value="0"></el-option>
          </el-select>
        </el-form-item>
       
         <el-form-item v-if="usered.utype == 1" label="会员结束时间" :label-width="formLabelWidth" >
          <el-date-picker
            v-model="usered.endday"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd hh:mm:ss">
            </el-date-picker>
        </el-form-item>
        <!-- </template> -->
        <el-form-item label="余额" :label-width="formLabelWidth">
          <el-input v-model="usered.umoney" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="modifyUser()">确 定</el-button>
      </div>
    </el-dialog>

    <el-table :data="User.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
      <el-table-column prop="uname" label="姓名" width="160">
      </el-table-column>
      <el-table-column prop="upwd" label="密码" width="160">
      </el-table-column>
      <el-table-column prop="utele" label="联系方式" width="160">
      </el-table-column>
      <el-table-column label="用户类型" width="160">
        <template slot-scope="scope"> 
          {{ scope.row.utype == 0 ? '普通用户' : '会员' }}
        </template>
      </el-table-column>
      <el-table-column prop="endday" label="会员结束时间" width="160">
      </el-table-column>
      <el-table-column prop="umoney" label="账户余额" width="160">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="scope">
          <el-button type="primary" @click="updateUser(scope.row)">修改</el-button>
          <el-button type="danger" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
       
    </el-table>
  <el-pagination
      @size-change="size_change" 
      @current-change="current_change"  
      :current-page="currentPage"  
      :page-sizes="[2,3,5]"  
      :page-size="pagesize"  
      layout="total, sizes, prev, pager, next, jumper"  
      :total="User.length"> 
  </el-pagination>
  </div>
  

</template>
<script >
const axios = require("axios");
axios.defaults.baseURL = '/api/'
export default {
  data() {
    return {
      User: [],
      //添加用户
      dialogTableVisible: false,
      //修改用户
      dialogFormVisible4Edit:false,
      user: {
        uname: '',
        upwd: '',
        utele: '',
        utype: '',
        startday: '',
        endday: '',
        umoney: ''
      },
      usered: {
        uname: '',
        upwd: '',
        utele: '',
        utype: '',
        startday: '',
        endday: '',
        umony: ''
      },
      s: {
        uname: '',
        utype: '',
      },
      formLabelWidth: '120px',
      total:0,//总条目数
        pagesize:10,//每页显示条目个数
        currentPage:1,//当前页数
    }
  },
  props: [],
  components: {},
  created() {
    this.findAll();
    this.size_change(2);
  },
  mounted() {
    
  },
  methods: {
    test(ser){
      console.log("dasdasd"+ser.utype+"sdasdas");
      // if(ser.utype==''){
      //   ser.utype=2
      // }
       axios({
          method: 'get',
          url: '/users/conditionSelect',
          params:{
            uname:ser.uname,
            utype:ser.utype
          }
        }).then((res)=>{
          this.User = res.data
           console.log(res.data);
        })
    },
    size_change(newSize){
       this.pagesize = newSize
   },
   //监听 页码值 改变的事件
   current_change(newPage){
       this.currentPage = newPage
   },
    findAll() {
      axios.get('/users/getUsersList').then(res => {
        this.User = res.data;
        console.log(res.data);
        console.log(res.data.length);
      })
    },
    cancel: function () {
      this.$message.info("当前操作已取消")
      this.dialogTableVisible = false,
      this.dialogFormVisible4Edit=false
    },
    addUser: function () {
      console.log(this.user.startday);
      axios({
        method: 'POST',
        url: '/users/addUsers',
        data: this.user
      })
        .then((resp) => {
          this.dialogTableVisible = false;
          this.$message.success("添加成功");
          this.findAll();
        })
    },
    updateUser: function(users){
      this.usered=users;
      this.dialogFormVisible4Edit=true
    },
    modifyUser: function(){
      axios({
        method:'PUT',
        url:'/users/updateUsers',
        data: this.usered
      }).then(res=>{
        this.dialogFormVisible4Edit=false,
        this.$message.success("修改成功");
        this.findAll();
      })
    },
    deleteUser: function (user) {
      console.log(user.uid);
      axios({
        method: 'delete',
        url: '/users/deleteUsers/' + user.uid,
      })
        .then((res) => {
          this.$message.success('删除成功');
          this.findAll();
        })
    },
  }
};
</script>
<style lang='scss'>
</style>